<template>
  <div class="experienceList">
    <!-- 标题 -->
    <van-nav-bar
      :fixed="true"
      class="title"
      title="面经分享"
      right-text="搜索"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push('/experienceListSearch')"
    />
    <!-- 搜索 -->
    <!-- <div class="search">
      <div class="btn" @click="$router.push('/experienceListSearch')">
        <i class="iconfont iconicon_search"></i>
        请输入关键字
      </div>
    </div> -->
    <!-- 文章 -->
    <van-list
      class="main"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- v-for="item in list" :key="item" :title="item" -->
      <van-cell v-for="(item, index) in dataList" :key="index">
        <div class="item" @click="$router.push('/experienceDetail/' + item.id)">
          <div class="art_title">{{ item.title }}</div>
          <p>
            {{ item.content.substring(0, 60) }}
          </p>
          <div class="info">
            <div class="user">
              <img :src="baseUrl + item.author.avatar" />
              <span>{{ item.author.nickname }}</span>
            </div>
            <div class="flex"></div>
            <div class="right">
              <span>{{ item.created_at | dateStyleOne }}</span>
              <van-icon name="comment-o" />
              <span>{{ item.read }}</span>
              <van-icon
                name="good-job-o"
                :class="{ red: starArtList.includes(item.id) }"
              />
              <span>{{ item.star }}</span>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
// 导入api
import { apiExperienceList } from '@/api/find.js'
export default {
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL,
      dataList: [], // 数据
      // 页数
      start: 0,
      // 刷新控制
      loading: false,
      finished: false,
      starArtList: [] // 用户点赞列表
    }
  },
  methods: {
    async onLoad () {
      // 面经列表
      const res = await apiExperienceList({
        start: this.start,
        limit: 5,
        q: ''
      })
      this.dataList = [...this.dataList, ...res.data.list]
      // 终点判断
      if (res.data.list.length < 5) {
        this.finished = true
      }
      // 页码+1
      this.start += 5
      // 停止加载
      this.loading = false
    }
  },
  mounted () {
    // 获取用户点赞列表
    if (this.$store.state.userInfo.starArticles) {
      this.starArtList = this.$store.state.userInfo.starArticles
    }
  }
}
</script>

<style lang="less" scoped>
.experienceList {
  margin-top: 46px;
  .red {
    color: red !important;
  }
  /* 标题 */
  .title {
    background-color: #ca0131;
    /deep/.van-nav-bar__title {
      color: #fff;
    }
    /deep/ .van-icon {
      color: #fff;
    }
    /deep/ .van-nav-bar__text {
      color: #fff;
    }
  }
  /* 搜索 */
  // .search {
  //   .btn {
  //     margin: 10px auto;
  //     background-color: #f7f4f5;
  //     border-radius: 17px;
  //     width: 90%;
  //     height: 100%;
  //     text-align: center;
  //     font-size: 14px;
  //     line-height: 35px;
  //     color: #b8b7b7;
  //   }
  // }
  /* 文章 */
  .main {
    .info {
      display: flex;
      height: 20px;
      .flex {
        flex: 1;
      }
      .van-icon {
        vertical-align: middle;
        line-height: 20px;
        font-size: 14px;
      }
      span {
        vertical-align: middle;
        line-height: 20px;
        font-size: 12px;
        padding: 0 7px;
      }
    }
    .item {
      height: 140px;
      padding-top: 10px;
      padding-bottom: 25px;
      .art_title {
        height: 30px;
        font-size: 18px;
      }
      p {
        height: 55px;
        margin: 0;
        line-height: 27px;
        font-size: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .info {
        .user {
          img {
            vertical-align: middle;
            width: 22px;
            height: 22px;
            border-radius: 50%;
          }
        }
      }
    }
  }
}
</style>
